<%--
  Created by IntelliJ IDEA.
  User: LuoQing
  Date: 2022/1/6
  Time: 14:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>进入首页</title>
</head>
<head>
    <title>菜单页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/css/bootstrap.css" />
    <script src="/js/jquery-3.3.1.js"></script>
    <script src="/js/bootstrap.js"></script>
    <style>
        body{

        }
        #menus{
            float: left;
            position: relative;
            top: 70px;
        }
        a {text-decoration: none;color: white;font-size: 10px;margin-top: 10px;}
        a:hover {text-decoration: underline;}
        * {
            margin: 0;
            padding: 0;
            font-family: "微软雅黑";
            font-size: 10px;
            color: #eee;
        }
        #outgo{
            position: relative;
            left: 1024px;
        }
        /*盒子内部类为icon 的span 进行描述*/
        /*设置幽灵按钮*/
        .a {
            display: block;
            width: 180px;
            height: 50px;
            text-decoration: none;
            line-height: 50px;
            color: black;
            font-family:"微软雅黑";
            font-weight: bolder;
            border: 2px solid rgba(200, 155, 155, 0.3);
            padding-left: 35px;
            margin: 0 auto;
            box-sizing: border-box;
            /*兼容代码*/
            /*兼容IE浏览器*/
            -ms-box-sizing: border-box;
            /*兼容Safari和Chrome浏览器*/
            -webkit-box-sizing: border-box;
            /*兼容火狐浏览器*/
            -moz-box-sizing: border-box;
            /*添加过度效果*/
            transition: all 0.3s linear;
            position: relative;
        }
        .a{
            overflow: hidden;
        }
        .a:hover {
            background: #03e9f4;
            color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 100px #03e9f4;
            background-position: 20px center;
        }
        .a span {
            position: absolute;
            display: block
        }
        .a span:nth-child(1) {
            top: 0;
            left: -100%;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #03e9f4);
            animation: btn-anim1 1s linear infinite;
        }
        @keyframes btn-anim1 {
            0% {
                left: -100%;
            }
            50%,
            100% {
                left: 100%;
            }
        }
        .a span:nth-child(2) {
            top: -100%;
            right: 0;
            width: 2px;
            height: 100%;
            background: linear-gradient(180deg, transparent, #03e9f4);
            animation: btn-anim2 1s linear infinite;
            animation-delay: .25s
        }
        @keyframes btn-anim2 {
            0% {
                top: -100%;
            }
            50%,
            100% {
                top: 100%;
            }
        }
        .a span:nth-child(3) {
            bottom: 0;
            right: -100%;
            width: 100%;
            height: 2px;
            background: linear-gradient(270deg, transparent, #03e9f4);
            animation: btn-anim3 1s linear infinite;
            animation-delay: .5s
        }
        @keyframes btn-anim3 {
            0% {
                right: -100%;
            }
            50%,
            100% {
                right: 100%;
            }
        }
        .a span:nth-child(4) {
            bottom: -100%;
            left: 0;
            width: 2px;
            height: 100%;
            background: linear-gradient(360deg, transparent, #03e9f4);
            animation: btn-anim4 1s linear infinite;
            animation-delay: .75s
        }
        @keyframes btn-anim4 {
            0% {
                bottom: -100%;
            }
            50%,
            100% {
                bottom: 100%;
            }
        }

        .b {
            display: block;
            width: 180px;
            height: 50px;
            text-decoration: none;
            line-height: 50px;
            color: black;
            font-family: "微软雅黑";
            font-weight: bolder;
            border: 2px solid rgba(200, 155, 155, 0.3);
            padding-left: 65px;
            padding-top: 0;
            margin: 0 auto;
            box-sizing: border-box;
            /*兼容代码*/
            /*兼容IE浏览器*/
            -ms-box-sizing: border-box;
            /*兼容Safari和Chrome浏览器*/
            -webkit-box-sizing: border-box;
            /*兼容火狐浏览器*/
            -moz-box-sizing: border-box;
            /*添加过度效果*/
            transition: all 0.3s linear;
            position: relative;
        }
        .b{
            overflow: hidden;
        }
        .b:hover {
            background: #80FFFF;
            color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 5px #80FFFF, 0 0 25px #80FFFF, 0 0 50px #80FFFF, 0 0 100px #80FFFF;
            background-position: 20px center;
        }
        .b span {
            position: absolute;
            display: block
        }
        .b span:nth-child(1) {
            top: 0;
            left: -100%;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #03e9f4);
            animation: btn-anim1 1s linear infinite;
        }
        @keyframes btn-anim1 {
            0% {
                left: -100%;
            }
            50%,
            100% {
                left: 100%;
            }
        }
        .b span:nth-child(2) {
            top: -100%;
            right: 0;
            width: 2px;
            height: 100%;
            background: linear-gradient(180deg, transparent, #03e9f4);
            animation: btn-anim2 1s linear infinite;
            animation-delay: .25s
        }
        @keyframes btn-anim2 {
            0% {
                top: -100%;
            }
            50%,
            100% {
                top: 100%;
            }
        }
        .b span:nth-child(3) {
            bottom: 0;
            right: -100%;
            width: 100%;
            height: 2px;
            background: linear-gradient(270deg, transparent, #03e9f4);
            animation: btn-anim3 1s linear infinite;
            animation-delay: .5s
        }
        @keyframes btn-anim3 {
            0% {
                right: -100%;
            }
            50%,
            100% {
                right: 100%;
            }
        }
        .b span:nth-child(4) {
            bottom: -100%;
            left: 0;
            width: 2px;
            height: 100%;
            background: linear-gradient(360deg, transparent, #03e9f4);
            animation: btn-anim4 1s linear infinite;
            animation-delay: .75s
        }
        @keyframes btn-anim4 {
            0% {
                bottom: -100%;
            }
            50%,
            100% {
                bottom: 100%;
            }
        }
        .c {
            display: block;
            width: 180px;
            height: 50px;
            text-decoration: none;
            line-height: 50px;
            color: black;
            font-family: "微软雅黑";
            font-weight: bolder;
            border: 2px solid rgba(200, 155, 155, 0.3);
            padding-left: 90px;
            padding-top: 0;
            margin: 0 auto;
            box-sizing: border-box;
            /*兼容代码*/
            /*兼容IE浏览器*/
            -ms-box-sizing: border-box;
            /*兼容Safari和Chrome浏览器*/
            -webkit-box-sizing: border-box;
            /*兼容火狐浏览器*/
            -moz-box-sizing: border-box;
            /*添加过度效果*/
            transition: all 0.3s linear;
            position: relative;
        }
        .c{
            overflow: hidden;
        }
        .c:hover {
            background: #80FFFF;
            color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 5px #80FFFF, 0 0 25px #80FFFF, 0 0 50px #80FFFF, 0 0 100px #80FFFF;
            background-position: 20px center;
        }
        .c span {
            position: absolute;
            display: block
        }
        .c span:nth-child(1) {
            top: 0;
            left: -100%;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #03e9f4);
            animation: btn-anim1 1s linear infinite;
        }
        @keyframes btn-anim1 {
            0% {
                left: -100%;
            }
            50%,
            100% {
                left: 100%;
            }
        }
        .c span:nth-child(2) {
            top: -100%;
            right: 0;
            width: 2px;
            height: 100%;
            background: linear-gradient(180deg, transparent, #03e9f4);
            animation: btn-anim2 1s linear infinite;
            animation-delay: .25s
        }
        @keyframes btn-anim2 {
            0% {
                top: -100%;
            }
            50%,
            100% {
                top: 100%;
            }
        }
        .c span:nth-child(3) {
            bottom: 0;
            right: -100%;
            width: 100%;
            height: 2px;
            background: linear-gradient(270deg, transparent, #03e9f4);
            animation: btn-anim3 1s linear infinite;
            animation-delay: .5s
        }
        @keyframes btn-anim3 {
            0% {
                right: -100%;
            }
            50%,
            100% {
                right: 100%;
            }
        }
        .c span:nth-child(4) {
            bottom: -100%;
            left: 0;
            width: 2px;
            height: 100%;
            background: linear-gradient(360deg, transparent, #03e9f4);
            animation: btn-anim4 1s linear infinite;
            animation-delay: .75s
        }
        @keyframes btn-anim4 {
            0% {
                bottom: -100%;
            }
            50%,
            100% {
                bottom: 100%;
            }
        }
        .menusnone{
            margin:0; padding:0;
        }
        .on{
            display:none;
        }
    </style>
</head>
<body>
<div id="zhe">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top ">
    <h3><a class="navbar-brand" href="#">导航栏</a></h3>
    <ul class="navbar-nav">
        <c:forEach var="xx" items="${menus}" varStatus="dd">
            <li class="nav-item">
                <a class="nav-link" href="#">${xx.key.name}</a>
            </li>
        </c:forEach>
        <li class="nav-item xxx">
            <a class="nav-link" id="outgo" href="/suc/out">退出登录</a>
        </li>
    </ul>
</nav>
<div id="menus">
<c:forEach var="menus" items="${menus}" varStatus="item">
    <span class="a" id="${menus.key.name}" onclick="show(this)" style="cursor: pointer;">
        <span></span>
        <span></span>
        <span></span>
        <span></span>${menus.key.name}</span>
    <ul class="menusnone on" id="child_${item.index}"  style="list-style: none" >
    <c:forEach var="menu" items="${menus.value}">
        <li>
            <a class="b"  href="${menu.key.linkUrl}" target="${menu.key.target}" onclick="show(this)">
                <span></span>
                <span></span>
                <span></span>
                <span></span>${menu.key.name}</a>
<%--                <ul class="menusnone on" id="child_${item.index}" style="list-style: none" >
                    <c:forEach var="menu1" items="${menu.value}">
                        <li>
                            <a class="c" href="${menu1.linkUrl}" target="${menu1.target}">
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>${menu1.name}</a>
                        </li>
                    </c:forEach>
                </ul>--%>
        </li>
    </c:forEach>
    </ul>
</c:forEach>
</div>
</div>
<%--
<iframe name="xx" width="1300px" height="700px" scrolling="no" style="position: relative;top: 70px;border: 0px">

</iframe>
--%>
<script src="/js/jquery.serializejson.js"></script>
<script type="text/javascript">
    //显示菜单跟隐藏菜单的方法
    function show(it) {
        $(it).parent().find("ul").not(it).addClass("on");
        $(it).next().toggleClass("on");
        /*var url = document.getElementById("child_" + objspan);
        if (url.style.display == 'block') {
            url.style.display = 'none';
        } else {
            url.style.display = 'block';
        }*/
    }
/*    function show1(it) {
        $("ul").not(it).next().toggleClass("on");
    }*/
</script>
</body>
</html>
